import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:xinxuan/common/button_util.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class InputItemSmsCode extends StatelessWidget {

  final bool showBorder;
  final String defaultValue;
  final String value;
  final ValueChanged<String> onChenge;
  final Function onTap;
  final bool showError;
  /// 倒计时剩余秒数
  final int duration;
  InputItemSmsCode({
    required this.onChenge,
    required this.onTap,
    required this.duration,
    this.showBorder = true,
    this.defaultValue = '',
    this.value = '',
    this.showError = false
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      color: bgWhiteColor,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 4.w),
        height: 62.h,
        decoration: BoxDecoration(
          border: Border(
            bottom: showBorder ? BorderSide(
              width: .5,
              color: lineColor
            ) : BorderSide.none
          )
        ),
        child: Row(
          children: [
            Container(
              width: 84.w,
              child: Text(
                '验证码',
                style: TextStyle(
                  color: textBlackColor,
                  fontSize: 16.sp
                ),
              ),
            ),
            Expanded(
              child: TextField(
                // controller: TextEditingController(text: '$defaultValue'),
                controller: TextEditingController.fromValue(TextEditingValue(
                  // 输入的文本
                  text: value,
                  // 保持光标在最后
                  selection: TextSelection.fromPosition(
                    TextPosition(
                      affinity: TextAffinity.downstream,
                      offset: value.length
                    )
                  ))
                ),
                decoration: InputDecoration(
                  border: OutlineInputBorder(borderSide: BorderSide.none),
                  contentPadding: EdgeInsets.zero,
                  counterText: '',
                  hintText: '请输入验证码',
                  hintStyle: TextStyle(
                    fontSize: 16.sp,
                    color: textSubtitleColor,
                  )
                ),
                keyboardType: TextInputType.number,
                inputFormatters: [
                  FilteringTextInputFormatter.allow(RegExp('[0-9]')),
                ],
                maxLength: 6,
                cursorColor: textBlackColor,
                style: TextStyle(
                  fontSize: 16.sp,
                  color: textBlackColor
                ),
                onChanged: (String value) => onChenge(value)
              ),
            ),
            Row(
              children: [
                showError ? Text(
                  '验证码错误',
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: mainTextColor
                  ),
                ) : Container(),
                SizedBox(width: 10.w),
                duration >= 60 ? Container(
                  width: 90.w,
                  height: 30.h,
                  child: ButtonUtil(
                    text: '获取验证码', 
                    fontSize: 14.sp, 
                    borderRadius: 30.w, 
                    height: 30.h, 
                    onTop: () => onTap()
                  ),
                ) : Container(
                  width: 60.w,
                  height: 30.h,
                  child: ButtonUtil(
                    text: '${duration}s', 
                    fontSize: 14.sp, 
                    textColor: textSubtitleColor,
                    borderRadius: 30.w, 
                    height: 30.h, 
                    bgColors: [
                      lineColor,
                      lineColor,
                    ],
                    onTop: () {}
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}